<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <p>
        全选: <input type="checkbox" class="check-all" name="" id="">
    </p>
    <p>
        单选: <input type="checkbox" class="check-one" name="" id="">
        <input type="checkbox" class="check-one" name="" id="">
        <input type="checkbox" class="check-one" name="" id="">
        <input type="checkbox" class="check-one" name="" id="">
        <input type="checkbox" class="check-one" name="" id="">
        <input type="checkbox" class="check-one" name="" id="">
    </p>
</body>
<script>
    // 全选和反选

    // 全选:
    // 点击全选, 所有的单选跟随全选的状态

    // 反选:
    // 每次点击单件商品(单选), 判断所有的商品是否全都选中, 全都选中就反选(全选被选中), 否则就是未选中

    var checkAll = document.getElementsByClassName("check-all")[0];
    var checkOneList = document.getElementsByClassName("check-one");

    // 点击全选, 所有的单选跟随全选的状态
    checkAll.onclick = function () {
        var status = this.checked;  // 获取全选的状态
        console.log(status);

        // 所有的单选跟随全选的状态
        // for (var i = 0; i < checkOneList.length; i++) {
        //     var checkOne = checkOneList[i];
        //     checkOne.checked = status;
        // }


        Array.from(checkOneList).forEach(function (checkOne) {
            checkOne.checked = status;
        })

    }

    // 单选:
    // 每次点击单选, 判断所有的单选是否全都被选中,  全都选中就反选(全选被选中), 否则就是未选中

    for (let i = 0; i < checkOneList.length; i++) {
        let checkOne = checkOneList[i];
        checkOne.onclick = function () {
            // console.log(checkOne, i);

            // 如何判断所有的单选是否全都被选中?
            // (1) 计数法
            // var count = 0;
            // for (var j = 0; j < checkOneList.length; j++) {
            //     var item = checkOneList[j];
            //     if(item.checked){
            //         count++;
            //     }
            // }
            // checkAll.checked = count == checkOneList.length ? true : false;


            // (2) 假设法
            // var flag = true; // 假设全都被选中
            // for (var j = 0; j < checkOneList.length; j++) {
            //     var item = checkOneList[j];
            //     if (!item.checked) {
            //         flag = false;
            //         break;
            //     }
            // }
            // checkAll.checked = flag;
            
            
            // (2.1) 
            var flag = Array.from(checkOneList).every(function(checkOne){
                return checkOne.checked;
            })
            console.log(flag);
            checkAll.checked = flag;



        }
    }




</script>

</html>